<template>
	<div class="wrap">
		<div class="icon">
			<img src="../../assets/mouluejia.png" width="3.8133rem" alt="">
		</div>
		<div class="form">
			<div class="list">
				<img src="../../assets/login_icon_phone.png" alt="">
				<input type="tel" maxlength="11" v-model='mobile' placeholder='请输入手机号' @keyup='isCleanShow'>
				<img class="rIcon" src="../../assets/icon_clean.png" v-show="iconShow" alt="" @click='isPhoneClean'>
			</div>
			<div class="list">
				<img src="../../assets/login_icon_pwd.png" alt="">
				<input v-if='ispassword' type="password" maxlength="16" v-model='password' placeholder='请输入登录密码' @keyup='isCleanShow'>
				<input v-if='!ispassword' type="text" maxlength="16" v-model='password' placeholder='请输入登录密码' @keyup='isCleanShow'>
				<img src="../../assets/icon_clean.png" v-show="passShow" @click='isPassWrodClean' alt="">
				<img class="rIcon" :src="passwordSrc" alt="" @click='checkTpye'>
			</div>
		</div>
		<v-button buttonText='登录' :isActive='isActive' topNum='0.8rem' @toNext='login'></v-button>
		<div class="tips">
			<router-link to='/forget'>忘记密码？</router-link>
			<a class="register" @click="register">立即注册</a>
		</div>
		<!-- <input type="hidden" name="" id="key" value="MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDK39UZuExZ/LydZzZxLlF57nrowot4ATvQnhMG+iq/6QO9URCjDT5WkeN77bkUGnxxQNz3lRFRLZzQNqB81lgtsfdh/K/pVKZ4oPzJTpMLOXbxxlHhfFNDYIvpF/TZx/mYEj7f3K7+HfNq/JRf4Fq8jgjQ8p2GL5j6uyiCYgdQywIDAQAB" />
       -->
       <!--this.$store.dispatch('saveRegisterPhone',"");
        this.$store.dispatch('savePhoneCode',""); -->
	</div>
</template>
<script>
import login from '@/api/login/index'
import Button from '@/components/Button'
import { toast, isPhone, isPassWord,setCookie,getCookie,delCookie} from '@/util/index'
export default {
	data() {
		return {
			mobile: '',
			iconShow: false,
			password: '',
			passShow: false,
			passwordSrc: require('../../assets/icon_hide_pwd.png'),
			ispassword: true,

		}
	},
	computed: {
		isActive: function () {
			if (isPhone(this.mobile) && isPassWord(this.password)) {
				return true
			} else {
				return false
			}
		}
	},
	components: {
		'v-button': Button
	},
	methods: {
		isPhone() {
			if (!(/^1[34578]\d{9}$/.test(phone)) || phone.length != 11) {
				return false
			} else if (/^1[34578]\d{9}$/.test(phone) && phone.length == 11) {
				return true;
			}
		},
		register(){
			this.$store.dispatch('saveRegisterPhone',"");
       		this.$store.dispatch('savePhoneCode',"");
			this.$router.push({ path: '/register1' });
		},
		isCleanShow() {
			if (this.mobile != '') {
				this.iconShow = true
			} else {
				this.iconShow = false
			}
			if (this.password != '') {
				this.passShow = true
			} else {
				this.passShow = false
			}
		},
		isPhoneClean(){
			if (this.mobile != '') {
				this.mobile = ''
				this.iconShow = false
				return 
			}
		},
		isPassWrodClean() {
			if (this.password != '') {
				this.password = ''
				this.passShow = false
				return 
			}
		},
		checkTpye() {
			this.ispassword = !this.ispassword;
			if (!this.ispassword) {
				this.passwordSrc = require('../../assets/icon_show_pwd.png')
			} else {
				this.passwordSrc = require('../../assets/icon_hide_pwd.png')
			}
		},
		
		login() {
			let encrypt = new JSEncrypt();
			encrypt.setPublicKey(this.$store.state.commonkey);
			let senddata = {
				mobile: this.mobile,
				pwd: encrypt.encrypt(this.password),
				plat:"mlj"
			}
			if (this.isActive) {
				login.userLogin(senddata).then((data) => {
					if (data.data.code == 200) {
						//this.localStorage.setItem(this.mobile);
						window.localStorage.setItem("phone", this.mobile);
						this.$store.dispatch('saveRegisterPhone',this.mobile);
						this.$store.dispatch('saveToken',data.data.data.userId);
						
						
						
						setCookie('phone',this.mobile);
						setCookie('token',data.data.data.userId);
						//console.log(getCookie('phone'));
						this.$router.push({ path: '/' })
					} else {
						toast(data.data.message)
					}
				})
			}
		}
	},
	watch: {

	},
	created() {

	},
	beforeRouteEnter(to,from,next){
	    document.querySelector('title').innerText='谋略家'
	    next()
	}
}
</script>
<style lang='less' scoped>
@import '../../less/config.less';
.wrap {
	height: 100%;
	background-image: url('../../assets/login_bg.png');
	background-repeat: no-repeat;
	background-size: 100%;
}

.icon {
	padding-top: 2.5rem;
	text-align: center;
	img {
		width: 3.81333rem;
	}
}

.form {
	margin-top: 1rem;
}

.list {
	height: 1.1733rem;
	padding: 0 @p30;
	margin-bottom: 0.34667rem;
	position: relative;
	font-size: 0.42667rem;
	background-color: #141723;
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	-khtml-opacity: 0.7;
	opacity: 0.7;
	img {
		width: 0.42667rem;
		line-height: 1.1733rem;
		vertical-align: middle
	}
	.rIcon {
		position: absolute;
		right: @p30;
		top: 0.45rem;
	}
	input {
		margin-left: @p30;
		margin-top: .25rem;
		width: 6.8rem;
		color: #ffffff;
		height: .6rem;
		line-height: .6rem;
	}
	input::-webkit-input-placeholder {
		/* WebKit browsers*/
		color: @placeColor;
	}
	input::-moz-placeholder {
		/* Mozilla Firefox 4 to 18*/
		color: @placeColor;
	}
	input::-moz-placeholder {
		/* Mozilla Firefox 19+*/
		color: @placeColor;
	}
	input:-ms-input-placeholder {
		/* Internet Explorer 10+*/
		color: @placeColor;
	}
}

.tips {
	padding: 0 @p30;
	margin-top: @p30;
	font-size: 0.3733rem;
	position: relative;
	a {
		color: @Color;
		text-decoration: none;
	}
	.register {
		position: absolute;
		right: @p30;
		color: @actColor;
	}
}
</style>

